<template>
<div>
<div id="manage_top" v-if="tableLoading">
  <div style="display: inline-block;float: right">
    <el-button type="primary" @click="addModelManage">添加模型</el-button>
  </div>
</div>
<div id="manage_table" v-if="tableLoading">
  <el-table :data="pageInfo" style="width: 100%">
    <el-table-column label="模型标识" width="200" prop="key">
    </el-table-column>
    <el-table-column label="模型名称" width="200" prop="name">
    </el-table-column>
    <el-table-column label="版本号" width="200">
      <template #default="scope">
          <el-tag>{{ scope.row.revision }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="分类" width="210" prop="category">
    </el-table-column>
    <el-table-column label="创建日期" width="200" prop="createTime">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="warning" @click="manage_design(scope.row)">设计</el-button>
        <el-button size="small" type="primary" @click="manage_release(scope.row)">发布</el-button>
<!--        <el-button size="small" type="success" @click="manage_export(scope.row)">导出</el-button>-->
        <el-button size="small" type="danger"  @click="manage_delete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
  <div>
    <el-dialog v-model="addFalg" title="添加流程模型">
      <el-form :model="addModelObject">
        <el-form-item label="模型标识" :label-width="150">
          <el-input v-model.trim="addModelObject.key" autocomplete="off" />
        </el-form-item>
        <el-form-item label="模型名称" :label-width="150">
          <el-input v-model.trim="addModelObject.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="模型分类" :label-width="150">
          <el-input v-model.trim="addModelObject.category" autocomplete="off" />
        </el-form-item>
        <el-form-item label="模型介绍" :label-width="150">
          <el-input
              type="textarea"
              :rows="5"
              v-model.trim="addModelObject.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFalg = false">关闭</el-button>
        <el-button type="primary" @click="cofrimAdd">
          添加
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
 <div v-if="modelerLoading">
   <div style="position:relative;height: 88vh;">
     <iframe
         id="iframe"
         :src="modelerUrl"
         frameborder="0"
         contentWindow         width="100%"
         height="100%"
         name="activity"
         ref="multipleTable"
         scrolling="auto"
     />
     <Spin v-if="modelerLoading" fix size="large" />
   </div>
 </div>
  </div>

</template>
<script lang="ts" setup>
import {defineComponent, onBeforeMount, onMounted, reactive, ref} from 'vue'
import {addModel, deployVue, modelExportVue, modelListsVue, removeVue} from "../../api/model";
import {ElMessage, ElMessageBox} from 'element-plus';
import { useUsersStore } from '../../store/userInfo'
let pageSize =50
let pageNum =1
let pageInfo = ref([])
let modelerLoading = ref(true);
let tableLoading = ref(true);
let addFalg = ref(false);
let modelerUrl = ref('')
let multipleTable= ref();
let addModelObject = reactive({
  key:'',
  name:'',
  category:'',
  description:'',
});
window.addEventListener('message',async function (e) {
  if (e.data === "onlyClose") {
    modelerLoading.value=false;
    tableLoading.value =true;
    await query();
  } else if (e.data === "saveAndClose") {
    modelerLoading.value=false;
    tableLoading.value =true;
    await query();
  }
},false);

onMounted(async () => {
  await query();

})
const query = async () => {
  let res = await modelListsVue({pageSize: pageSize, pageNum: pageNum});
  pageInfo.value = res.data.rows;
}
//设计
const manage_design =async (item) =>{
      modelerUrl.value= import.meta.env.VITE_HTTP+"/editor?modelId="+item.id
      modelerLoading.value=true;
      tableLoading.value =false;
}
//发布
const manage_release =async (item) =>{
  let res = await deployVue({modelId:item.id});
  if (res.code==200){
    await query();
    ElMessage.success(res.msg)
  }else{
    ElMessage.success(res.msg)
  }
}
//导出
const manage_export =async (item) =>{
  let res = await modelExportVue({modelId:item.id});
}
//删除
const manage_delete =async (item) =>{
  ElMessageBox.confirm('确认删除该模型?')
      .then(async () => {
        let res = await removeVue({modelId:item.id});
        if (res.code==200){
          await query();
          ElMessage.success(res.msg)
        }else {
          console.log(res.code)
          ElMessage.error("删除失败")
        }
      })
}
const addModelManage = () => {
  console.log("12321434")
  addFalg.value=true;
  addModelObject = reactive({
    key:'',
    name:'',
    category:'',
    description:'',
  });
}
const cofrimAdd = async () => {
  let res = await addModel({
    key:addModelObject.key,
    name:addModelObject.name,
    category:addModelObject.category,
    description:addModelObject.description,
  });
  if (res.code ==200){
    ElMessage.success(res.msg)
    addFalg.value=false;
    await query();
  }else if (res.code ==500){
    ElMessage.error(res.msg)
  }
}
</script>

<style scoped>
</style>
